# Tabs tests

```mdx-code-block
import BrowserWindow from '@site/src/components/BrowserWindow';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
```

## Tabs with dynamic default value

This can cause [bugs](https://github.com/facebook/react-native-website/issues/2771) when default value is different between SSR and client:

```mdx-code-block
export const isMacOS = typeof window !== 'undefined' && navigator.platform.startsWith('Mac');

<BrowserWindow>
  <Tabs defaultValue={isMacOS ? "ios" : "android"}>
    <TabItem value="android" label="Android">Android content</TabItem>
    <TabItem value="ios" label="iOS">iOS content</TabItem>
  </Tabs>
</BrowserWindow>
```

## Tabs sync with different heights

```mdx-code-block
<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">
    Use Ctrl + C to copy.
  </TabItem>
  <TabItem value="mac" label="macOS">
    very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text
  </TabItem>
</Tabs>
```

```mdx-code-block
<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">
    Use Ctrl + V to paste.
  </TabItem>
  <TabItem value="mac" label="macOS">
    Use Command + V to paste.
  </TabItem>
</Tabs>
```

When clicking tabs above, they should stay under cursor and we should adjust the scroll position.

## Tabs with className and lazy loading

<Tabs lazy>
  <TabItem value="apple" label="Apple" className="alert alert--primary" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange" className="alert alert--secondary">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana" className="alert alert--success">
    This is a banana 🍌
  </TabItem>
</Tabs>
